import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Slider, Layout ,List} from 'antd'
import { setMusicListAsync, } from '../../redux/actions'
import { musicDurationFilter } from '../../Utils/musicFilter'
import './right_top.css'

const { Header, Content } = Layout;

class rightTop extends Component {
  constructor(props) {
    super(props)
    this.state = {
      currentTime: '00:00',
      progress: 0,
      currentLyric:{}
    }
  }

  upDateTime = () => {
    var currentTime = musicDurationFilter(this.props.audio.currentTime)
    var progress = (this.props.audio.currentTime / this.props.audio.duration) * 100
    this.setState({
      currentTime,
      progress
    })
     var timeArr = this.props.currentLyric.timeArr||[1]
     var current = Math.round(this.props.audio.currentTime)
    var cline = timeArr.indexOf(current)
    if(cline!=-1){
      if(cline>1){
        var str0 =  `list${cline-1}`
        this[str0].style.color= 'black'     
      }
      var str1 =  `list${cline}`    
      this[str1].style.color= 'red'
      this.context.scrollTo(0,(cline-4)*37);
    }
    {/**  color:red      <div className='' > 123 </div>   */}
  }
  componentDidMount() {
    setTimeout(() => {
      this.props.audio.addEventListener("timeupdate", this.upDateTime)
    }, 10)
  }



  SliderChange = value => {
    this.setState({
      progress: value,
    });
    var currentTime = value * this.props.audio.duration / 100
    this.props.audio.currentTime = currentTime
  };

  render() {
    return (
      <div>
        <Header style={{ background: '#fff', padding: 0, textAlign: 'center', fontWeight: 700, fontSize: '25px' }} >{this.props.currentMusic != -1 ? this.props.musicList[this.props.currentMusic] : '半壶纱'}</Header>
        <Content style={{ margin: '24px 16px 0' }}>
          <div className="right_content" ref={ context =>this.context = context}>
            <List 
              size={'small'}
              bordered
              dataSource={this.props.currentLyric.txtArr}
              renderItem={(item,i) => {
                  return ( <div style={{"height":"37px"}}  ref={ list=>this['list'+i]=list }  ><List.Item>{item}</List.Item></div>)
              }}
            />
          </div>
          <div className="musicProgress">
            <Slider value={this.state.progress} onChange={this.SliderChange} />
            <div>{this.state.currentTime}/{musicDurationFilter(this.props.audio.duration || 0)}</div>
          </div>
        </Content>
      </div>
    )
  }

}
const stateMap = state => {
  return {
    musicList: state.musicList,
    currentMusic: state.currentMusic,
    audio: state.audio,
    currentLyric:state.currentLyric
  }
}
const actionsMap = dispatch => {
  return {
    setMusicListAsync: () => {
      dispatch(setMusicListAsync())
    }
  }
}


export default connect(stateMap, actionsMap)(rightTop);